<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Excel File Upload</title>
</head>
<body>
    <h1>Upload an Excel File</h1>
    <form id="uploadForm">
        <input type="file" id="fileInput" accept=".xlsx">
        <button type="button" id="uploadButton">Upload and Convert</button>
    </form>
    <div id="result"></div>

    <script>
        document.getElementById('uploadButton').addEventListener('click', async () => {
    const fileInput = document.getElementById('fileInput');
    if (!fileInput.files.length) {
        alert('Please select a file.');
        return;
    }

    const file = fileInput.files[0];
    const formData = new FormData();
    formData.append('file', file);

    try {
        const response = await fetch('http://127.0.0.1:5000/convert', {
            method: 'POST',
            body: formData
        });
        console.log(response); // 打印出response对象

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        // 访问特定的响应头
        const contentType = response.headers.get('Content-Type');
        const contentDisposition = response.headers.get('Content-Disposition');

        // 打印获取到的响应头信息
        console.log('Content-Type:', contentType);
        console.log('Content-Disposition:', contentDisposition);


        const filename = response.headers.get('Content-Disposition').split('filename=')[1];
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = filename || 'converted.xlsx';

        // 打印下载链接（可选）
        console.log('Download link:', a.href);

        // 触发下载
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
        
    } catch (error) {
        console.error('Error:', error);
        alert('An error occurred while uploading the file.');
    }
});

    </script>
</body>
</html>